<template>
  <div id="app">
    <h1>vm-select</h1>
    <h2>常规使用</h2>
    <div class="demo">
      <vm-select search class="vm-select--error" :options="option1" v-model="model1" multiple></vm-select>
    </div>
    <h2>多选</h2>
    <div class="demo">
      <vm-select clear @on-maxnum-warn="maxwarn" :options="option2" label="name" label-key="key" v-model="model2" search multiple></vm-select>
    </div>
    {{model2}}
  </div>
</template>

<script>
import vmSelect from './components/vm-select/index'
export default {
  name: 'App',
  components: {
    vmSelect
  },
  data () {
    return {
      option1: [1, 2, 3, 4, 5],
      option2: [],
      model1: 9,
      model2: []
    }
  },
  mounted () {
    setTimeout(() => {
      this.option2 = [
        { key: 'Kaka', name: '卡卡' },
        { key: 'Gerrard', name: '杰拉德' },
        { key: 'Agger', name: '阿格尔' },
        { key: 'Kuyt', name: '库伊特' },
        { key: 'Hendon', name: ' 亨德森' },
        { key: 'alisson', name: '阿利松' }
      ]
      this.model2 = ['Gerrard']
    }, 300)
  },
  methods: {
    maxwarn (v) {
      console.log(v)
    }
  }
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  width: 600px;
  margin: 0 auto;
}
.demo {
  width: 250px;
  height: 45px;
}
</style>
